<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        body{
            font-size:100px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color:aqua;
            
        }
        .box2{
            width:200px;
            height:200px;
            background-color:darkorchid;
            position:relative;
            left:200px;
            bottom:200px;
            /* top:-200px; */
        /*4、相对定位的特点:相对于元素在文档流中的位置相对定位的；参照物：相对于自己原来的位置而言
        （1）元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化
        偏移量：(offset)：当元素开启了定位以后，我们可以通过偏移量来设置元素的位置
        top:定位元素和定位位置上边的距离
        bottom:定位元素和定位位置下边的距离
        定位元素垂直方向的位置由top和bottom两个属性共同决定，通常情况下，只用其一
        left:定位元素和定位位置左边的距离,left越大元素越靠右
        right:定位元素和定位位置右边的距离，right越大元素越靠左
        定位元素水平方向的位置由left和right两个属性共同决定，通常情况下，只用其一
        （2）相对定位是参照于元素在文档流中的位置进行定位的
        （3）相对定位会提升元素的层级
        （4）相对定位不会使元素脱离文档流
        （5）相对定位不会改变元素的性质
        */
        /*
        1、定位(position)：更加高级的布局手段，通过定位可以将一个元素摆放到页面的任何位置，
        使用position属性来设置定位
        2、可选值
        （1）static：默认值，元素是静止的，没有开启定位
        （2）relative：开启元素的相对定位
        （3）absolute：开启元素的绝对定位
        （4）fixed：开启元素的固定定位
        （5）sticky：开启元素的粘滞定位
        3、相对定位：position：relative；
        */
          
            
        }
        .box3{
            width:200px;
            height:200px;
            background-color:deeppink;
           
        }


    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    
</body>
</html>